<template>
	<div class="top">
		<h2>秒杀活动</h2>
		<div class="miao">
			秒杀活动列表
			<button>添加活动</button>
		</div>
	<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"  class="top_miao">
		<el-table-column type="selection" width="55">
		</el-table-column>
		<el-table-column label="日期" width="120">
			<template slot-scope="scope">{{ ser.name }}</template>
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="120">
		</el-table-column>
		<el-table-column prop="address" label="地址" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="操作" show-overflow-tooltip>
			<div style="margin-top: 20px">
				<el-button>切换第二、第三行的选中状态</el-button>
				<el-button>取消选择</el-button>
			</div>
		</el-table-column>
	</el-table>
</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		name: 'cao',
		setup() {
			const ser = ref([
				{
					name: "赵黑子",
					age: "18",
					sex: 0,

				},
				{
					name: "赵黑子",
					age: "18",
					sex: 0,

				},
				{
					name: "赵黑子",
					age: "18",
					sex: 0,

				}
			])
			return {
				ser
			}
		}
	}
</script>
<style>
	.top{
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
	}
	h2{
		color: black;
		float: left;
		margin: 30px;
	}
	.top>.top_miao{
		width: 90%;
		height: 100vh;
		margin: auto;
	}
	.miao{
		width: 90%;
		height: 100px;
		margin:  80px auto 5px;
		background-color: white;
		text-align: left;
		line-height: 100px;
		color: black;
	}
	.miao>button{
		float: right;
		width: 80px;
		height: 40px;
		margin: 30px 20px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
	}
</style>
